<template>
	<s-layout page-title='完善资料'>
		<view class="u-wrapper">
			<view class="uv-font-40 text-ffffff">请完善您的身份信息</view>
			<view class="u-wrapper-body">
				<uv-form label-width="140rpx">
					<uv-form-item label="头像">
						<button class="d-flex align-center avatar-button" open-type="chooseAvatar" hover-class="none"
							:plain="true" @chooseavatar="onChooseAvatar">
							<view style="margin-right: 20rpx;">点击设置头像</view>
							<uv-avatar width="84rpx" height="84rpx" :src='form.nickUrl' />
						</button>
					</uv-form-item>
					<uv-form-item label="用户昵称" class="uv-m-t-30">
						<uv-input placeholder="请输入" input-align="right" border="none" v-model="form.nickName"
							confirm-type="down" @blur="nicknameBlur" type="nickname" />
					</uv-form-item>
				</uv-form>
			</view>
			<view class="d-btn">
				<uv-button type="primary" :loading="loading" @click="submit">确认并提交</uv-button>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import useUpload from '@/hooks/useUpload.js'

	const form = ref({})
	
	const user = ref({})

	const loading = ref(false)

	const nicknameBlur = (e) => {
		if (e) {
			form.value.nickName = e;
		}
	}
	const onChooseAvatar = (e) => {
		const url = e.detail.avatarUrl;
		uni.showLoading({
			title: '上传中.....'
		});
		useUpload(url).then(res => {
			form.value.nickUrl = res
		})
	}

	const submit = () => {
		console.log(form.value)
		loading.value = true
		console.log(user, '----------')
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				let code = res.code;
		uni.request({
			// url: 'https://weixin.shuzinongyue.com:8942/userInfo/updateUser',
			// url: 'http://61.163.243.13:8944/userInfo/updateUser',
			url: 'https://wechat.shuzinongyue.com:8922/userInfo/updateUser',
			method: 'POST',
			data:{
				code:code,
				nickName:form.value.nickName,
				nickUrl:form.value.nickUrl[0]
			} ,
			success: (res) => {
				// 这一部分后面更新接口后可去掉
				user.value.avatarUrl = form.value.nickUrl
				user.value.nickName = form.value.nickName
				console.log('user.value', user.value);
				console.log('user.value', res.data.data);
				uni.setStorageSync('userInfo', res.data.data)
				// uni.setStorageSync('userInfo', user.value)
				loading.value = false
				uni.navigateBack()
				uni.hideLoading();
				
			}
		})}})
	}

	onLoad(() => {
		// 后面换接口
		const user = uni.getStorageSync('userInfo')
		if (user) {
			user.value = user
			form.value.nickUrl = user.photoUrl
			form.value.nickName = user.nick
		}
	})
</script>

<style lang="scss" scoped>
	.u-wrapper {
		height: 600rpx;
		padding: 80rpx 40rpx;
		background: linear-gradient(180deg, #3c9cff 0%, #F0F2F5 100%);

		&-body {
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 60rpx;
			padding: 24rpx;
			font-size: 28rpx;
			width: calc(100% - 40rpx);

			:deep(.uv-form-item__body__right__content__slot) {
				justify-content: flex-end;
			}
		}

		.avatar-button {
			border: none;
			font-size: 28rpx;
			display: flex;
			margin: 0;
			justify-content: flex-end;
		}

		.d-btn {
			margin-top: 200rpx;
			width: 100%;
		}
	}
</style>